<template>
  <div class="MyCardBag">
    <van-list
      v-model="dataList[active].loading"
      :finished="dataList[active].finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-tabs v-model="active" color="#D4B066">
        <van-tab title="未使用">
          <div class="Order_item" v-if="dataList[active].list.length > 0">
            <div
              class="OrderItem"
              v-for="(item, index) in dataList[active].list"
              :key="index"
            >
              <van-row class="Order_item">
                <van-col span="7">
                  <img :src="$base.baseImg + item.proList[0].img[0]" />
                </van-col>
                <van-col span="17">
                  <div class="Order_right">
                    <h3>{{ item.proList[0].proName }}</h3>
                    <p>￥ {{ (item.payAmount / 100).toFixed(2) }}</p>
                  </div>
                </van-col>
              </van-row>
              <div class="Order_bottom">
                <van-button
                  type="primary"
                  @click="goToCartDetail(item.orderNumber)"
                  color="#D4B066"
                  round
                  size="mini"
                  >去使用</van-button
                >
              </div>
            </div>
          </div>
          <van-empty v-else />
        </van-tab>
        <van-tab title="已使用">
          <div class="Order_item" v-if="dataList[active].list.length > 0">
            <div
              class="OrderItem"
              v-for="(item, index) in dataList[active].list"
              :key="index"
            >
              <van-row class="Order_item">
                <van-col span="7">
                  <img :src="$base.baseImg + item.proList[0].img[0]" />
                </van-col>
                <van-col span="17">
                  <div class="Order_right">
                    <h3>{{ item.proList[0].proName }}</h3>
                    <p>￥ {{ (item.payAmount / 100).toFixed(2) }}</p>
                  </div>
                </van-col>
              </van-row>
              <div class="Order_bottom">
                <van-button
                  type="primary"
                  @click="geToVerification(item.orderNumber)"
                  color="#D4B066"
                  round
                  size="mini"
                  >去查看</van-button
                >
              </div>
            </div>
          </div>
          <van-empty v-else />
        </van-tab>
      </van-tabs>
    </van-list>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { Tab, Tabs, List, Empty, Button, Col, Row } from "vant";
Vue.use(List);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Button);
Vue.use(Col);
Vue.use(Row);
Vue.use(Empty);
@Component({})
export default class MyCardBag extends Vue {
  private active: number = 0;
  private dataList = [
    {
      form: {
        page: 1,
        size: 20,
        typ: 2,
        status: 2,
        qrStatus:0
      },
      loading: false,
      finished: false,
      list: [],
    },
    {
      form: {
        page: 1,
        size: 20,
        typ: 2,
        status: 3,
        qrStatus:1
      },
      loading: false,
      finished: false,
      list: [],
    },
  ];
  private loading: boolean = false;
  private finished: boolean = false;
  private onLoad(): void {
    this.$common.getAuthToken(this.getData);
  }
  private getData() {
    this.$post(`userOrderList`, this.dataList[this.active].form).then(
      (res: any) => {
        if (res.code == 0) {
          this.dataList[this.active].loading = false;
          this.dataList[this.active].list = this.dataList[
            this.active
          ].list.concat(res.data.list);
      this.dataList[this.active].form.page += 1;
        if (res.data.list.length < 20) {
          this.dataList[this.active].finished = true;
        }
        }
      }
    );
  }
  private goToCartDetail(e: string) {
    this.$router.push(`/writeOff/${e}`);
  }
  private geToVerification(e: string) {
    this.$router.push(`/verification/${e}`);
  }
}
</script>

<style lang="scss" scope>
.MyCardBag {
  width: 100%;
  .OrderItem {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 20px;
    margin-bottom: 20px;
    .Order_item {
      border-bottom: 1px solid #dbdbdb;
      padding: 10px 0;
      box-sizing: border-box;
      img {
        width: 100%;
        display: block;
        height: 150px;
        border-radius: 10px;
      }
      .Order_right {
        padding-left: 10px;
        box-sizing: border-box;
        h3 {
          font-size: 30px;
          font-weight: 400;
          color: #000000;
          line-height: 1.5;
        }
        p {
          font-size: 24px;
          font-weight: 300;
          color: #333333;
          line-height: 1.5;
        }
      }
    }
    .Order_bottom {
      padding: 10px;
      box-sizing: border-box;
      text-align: right;
    }
  }
}
</style>